<template>
  <div id="app">
    <t-row :gutter="10">
      <t-col span="24" :ipad="{ span: 6 }" :narrow-pc="{ span: 8 }">
        <div class="demo"></div>
      </t-col>
      <t-col span="24" :ipad="{ span: 12 }" :narrow-pc="{ span: 8 }">
        <div class="demo"></div>
      </t-col>
      <t-col span="24" :ipad="{ span: 12 }" :narrow-pc="{ span: 8 }">
        <div class="demo"></div>
      </t-col>
    </t-row>

    <t-popover position="bottom">
      <template slot="content">
        <div>popover内容</div>
      </template>
      <button>点我</button>
    </t-popover>

    <t-popover postion="top">
      <template slot="content">
        <div>popover内容</div>
      </template>
      <button>点我</button>
    </t-popover>
    <t-popover position="left">
      <template slot="content">
        <div>popover内容</div>
      </template>
      <button>点我</button>
    </t-popover>

    <t-popover position="right">
      <template slot="content">
        <div>popover内容</div>
      </template>
      <button>点我</button>
    </t-popover>

    <t-popover position="bottom" trigger="hover">
      <template slot="content">
        <div>popover内容</div>
      </template>
      <button>点我</button>
    </t-popover>

    <t-popover postion="top" trigger="hover">
      <template slot="content">
        <div>popover内容</div>
      </template>
      <button>点我</button>
    </t-popover>
    <t-popover position="left" trigger="hover">
      <template slot="content">
        <div>popover内容</div>
      </template>
      <button>点我</button>
    </t-popover>

    <t-popover position="right" trigger="hover">
      <template slot="content">
        <div>popover内容</div>
      </template>
      <button>点我</button>
    </t-popover>

    <t-popover position="left" trigger="hover">
      <template slot="content">
        <div>popover内容</div>
      </template>
      <button>点我</button>
    </t-popover>

    <t-popover position="right" trigger="hover">
      <template slot="content">
        <div>popover内容</div>
      </template>
      <button>点我</button>
    </t-popover>
    -->

    <!-- <t-tabs selected.sync="thing">
      <t-tabs-head>
        <template slot="actions">
          <button>设置</button>
        </template>
        <t-tabs-item name="people" disabled>
          <t-icon name="setting"></t-icon>人a
        </t-tabs-item>
        <t-tabs-item name="thing">
          物体
        </t-tabs-item>
        <t-tabs-item name="money">
          财经
        </t-tabs-item>
      </t-tabs-head>
      <t-tabs-body>
        <t-tabs-pane name="people">
          人-相关
        </t-tabs-pane>
        <t-tabs-pane name="thing">
          物-相关
        </t-tabs-pane>
        <t-tabs-pane name="money">
          财-相关
        </t-tabs-pane>
      </t-tabs-body>
    </t-tabs> -->

    <div class="box">
      <t-input value="张三" disabled></t-input>
      <t-input value="李四" readonly></t-input>
      <t-input value="何"></t-input>
    </div>
    <div class="box">
      <t-input value="陈"></t-input>
    </div>
    <div class="box">
      <t-input value="王五" error="姓名不能少于两个字"></t-input>
    </div>
    <div class="box">
      <t-button icon="settings">
        按钮
      </t-button>
      <t-button :loading="loading1" @click="loading1 = !loading1"
        >按钮</t-button
      >
      <t-button icon="settings" icon-position="right">
        按钮
      </t-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      loading1: false
    };
  }
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
